<template>
    <div class="message">
        <el-radio></el-radio>人员基本信息
    </div>
    <el-form label-width="180px" :rules="rules" :inline="true" :model="state.dataForm"
        @keyup.enter="state.getDataList()">
        <div style="display: flex;">
            <div>
                <el-row style="width: 820px;">
                    <el-col :span="12">
                        <el-form-item label="姓名">
                            <el-input v-model="state.dataForm.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="英文名字">
                            <el-input v-model="state.dataForm.firstName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公司">
                            <el-input v-model="state.dataForm.company" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="第二公司">
                            <el-input v-model="state.dataForm.company" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机一" prop="mobile">
                            <el-input v-model="state.dataForm.mobile" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机二" prop="mobile2">
                            <el-input v-model="state.dataForm.mobile2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话一" prop="tel">
                            <el-input v-model="state.dataForm.tel" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话二" prop="tel2">
                            <el-input v-model="state.dataForm.tel2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="传真一">
                            <el-input v-model="state.dataForm.fax1" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="传真二">
                            <el-input v-model="state.dataForm.fax2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="邮箱一" prop="email">
                            <el-input v-model="state.dataForm.email" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱二" prop="email2">
                            <el-input v-model="state.dataForm.email2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门">
                            <el-input v-model="state.dataForm.department" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="职位">
                            <el-input v-model="state.dataForm.position" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国家">
                            <el-input v-model="state.dataForm.country" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="省份">
                            <el-input v-model="state.dataForm.province" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="城市">
                            <el-input v-model="state.dataForm.city" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地址">
                            <el-input v-model="state.dataForm.address" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公司英文">
                            <el-input v-model="state.dataForm.eCompnay" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="英文地址">
                            <el-input v-model="state.dataForm.address2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="qq">
                            <el-input v-model="state.dataForm.qq" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信">
                            <el-input v-model="state.dataForm.wechat" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="网址">
                            <el-input v-model="state.dataForm.website" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属行业">
                            <el-select v-model="state.dataForm.industry" placeholder="请选择" style="width: 250px;">
                                <el-option v-for="role in tradeList" :key="role.id" :label="role.name" :value="role.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证件号">
                            <el-input v-model="state.dataForm.idCard" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品类别">
                            <el-select v-model="state.dataForm.productType" placeholder="请选择" style="width: 250px;">
                                <el-option v-for="role in productList" :key="role.id" :label="role.name"
                                    :value="role.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-col :span="14">
                    <el-form-item label="标签一">
                        <el-input v-model="state.dataForm.extField1" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="标签二">
                            <ren-checkbox-group v-model="state.dataForm.extField2" dict-type="details-tags"
                                style="width:260px"></ren-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="岗位职责：" prop="unifyRank">
                            <ren-radio-group v-model="state.dataForm.unifyRank" dict-type="responsibility"
                                style="width: 308px;"></ren-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="工作性质" prop="unifyDept">
                            <ren-radio-group v-model="state.dataForm.unifyDept" dict-type="work_nature"
                                style="width: 308px;"></ren-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="人员类别">
                            <ren-checkbox-group v-model="state.dataForm.type"
                                dict-type="person_level"></ren-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="备注">
                            <el-input v-model="state.dataForm.remark" placeholder="请输入"
                                style="height: 70px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="产品">
                            <el-input v-model="state.dataForm.company" placeholder="请输入"
                                style="height: 70px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-form>
    <el-form-item label-width="180px" style="margin-top: 5px;">
        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="getPrevious()" :disabled="page === 1">上一条</el-button>
        <el-button @click="getNext()" :disabled="page === 0">下一条</el-button>
    </el-form-item>
    <!-- 人员参会史 -->
    <div style="display: flex;">
        <div style="margin-top: -6px;">
            <el-radio></el-radio>
        </div>
        <div class="message">人员参会史</div>
    </div>
    <div style="margin-left: 70px;">
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            :data="state.dataForm.list" center border style="width: 100%;margin-top: 15px; ">
            <el-table-column type="selection"></el-table-column>
            <el-table-column align="center" prop="exhName" label="展会名称" min-width="250"></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" min-width="100"></el-table-column>
            <el-table-column align="center" prop="company" label="公司" min-width="300"></el-table-column>
            <el-table-column align="center" prop="position" label="职务"  min-width="100"></el-table-column>
            <el-table-column align="center" prop="department" label="部门" min-width="100"></el-table-column>
            <el-table-column align="center" prop="mobile" label="手机1" min-width="120"></el-table-column>
            <el-table-column align="center" prop="mobile2" label="手机2" min-width="120"></el-table-column>
            <el-table-column align="center" prop="tel" label="电话1" min-width="150"></el-table-column>
            <el-table-column align="center" prop="tel2" label="电话1" min-width="150"></el-table-column>
            <el-table-column align="center" prop="fax1" label="传真" min-width="120"></el-table-column>
            <el-table-column align="center" prop="address" label="地址" min-width="300"></el-table-column>
            <el-table-column align="center" prop="email" label="邮箱" min-width="180"></el-table-column>
            <el-table-column align="center" prop="source" label="数据来源" min-width="120"></el-table-column>
            <el-table-column align="center" prop="state" label="参会身份" min-width="120"></el-table-column>
        </el-table>
    </div>
    <!-- 联络历史 -->
    <div style="display: flex; margin-top: 20px;">
        <div style="margin-top: -6px;">
            <el-radio></el-radio>
        </div>
        <div class="message">联络历史</div>
    </div>
    <div style="margin-left: 70px;margin-top: 20px;">
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
        v-loading="state.dataListLoading"  :data="state.dataForm.linkRecordDTOList" center border style="width: 100%;">
            <el-table-column align="center" prop="exhName" label="展会名称"></el-table-column>
            <el-table-column align="center" prop="tskName" label="联络任务"></el-table-column>
            <el-table-column align="center" prop="company" label="联络信息"></el-table-column>
            <el-table-column align="center" prop="lrdResult" label="联络过程"></el-table-column>
            <el-table-column align="center" prop="lrdRemark" label="备注"></el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, } from "vue";
import { useRoute } from 'vue-router';
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const view = reactive({
    getDataListIsPage: true,
    deleteIsBatch: true,
    dataForm: {
        id: "",
        name: "",
        city: '',
        firstName: "",
        lastName: "",
        tel: "",
        tel2: '',
        fax1: '',
        fax2: "",
        mobile: "",
        mobile2: "",
        email: "",
        email2: "",
        qq: "",
        wechat: "",
        nationality: "",//国籍
        idCard: "",//证件号
        department: "",//部门
        position: "",//职务
        company: "",//公司
        website: "",//网址
        industry: "",//所属行业
        country: "",//国家
        province: "",//省份
        extField1: "",//标签一
        extField2: "",//标签二
        remark: "",//备注
        address: "",//地址
        eCompnay:"",//公司英文名
        address2: "",//英文地址
        productType: "",//产品类别
        category: "",
        source: "",
        state: "",
        exhName: "",
        input: "",
        options1: "",
        status: 1,
        unifyRank: "",//岗位职责
        unifyDept: "",//工作性质
        type: "",//人员类别
        list: [],
        linkRecordDTOList: "",
    }
});

const rules = ref({
    mobile: [
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'change' },
        // { required: true, message: t("validate.required"), trigger: "blur" }
    ],
    mobile2: [
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'change' },

    ],

    email: [
        { pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'change' },

    ],
    email2: [
        { pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'change' },
    ],
});

//初始化
const init = () => {
    //公司行业
    getTradeList()
    //产品类别
    getproductList()
};


//接收过来的id
const route = useRoute();
const id = route.query.id;
const page = ref(1);
const limit = ref(1);
const baseURL = '/crm/crmperson/getBaseInfoPage';

//回显页面信息
baseService.get("/crm/crmperson/getBaseInfo/" + id).then((res) => {
    Object.assign(state.dataForm, res.data);
    console.log(res);
});

/**
 *下一条
 */
 const getNext = async () => {
  try {
    // 更新页面编号
    page.value++;

    // 构建带有限制参数的URL
    const url = `${baseURL}?page=${page.value}&limit=${limit.value}`;

    // 发送请求获取下一页的数据
    const res = await baseService.get(url);

    // 更新数据状态
    Object.assign(state.dataForm, res.data);
  } catch (error) {
    // 处理错误
    console.error(error);
  }
};

/**
 *上一条
 */
 const getPrevious = async () => {
  try {
    // 更新页面编号
    page.value--;

    // 构建带有限制参数的URL
    const url = `${baseURL}?page=${page.value}&limit=${limit.value}`;

    // 发送请求获取下一页的数据
    const res = await baseService.get(url);

    // 更新数据状态
    Object.assign(state.dataForm, res.data);
  } catch (error) {
    // 处理错误
    console.error(error);
  }
};


/**
 *公司行业
 */
const tradeList = ref<any[]>([]);
const getTradeList = () => {
    return baseService.get("/crm/crmtypeinfo/getListByType/1").then((res) => {
        tradeList.value = res.data;
    });
};

/**
 *产品类别
 */
const productList = ref<any[]>([]);
const getproductList = () => {
    return baseService.get("/crm/crmtypeinfo/getListByType/2").then((res) => {
        productList.value = res.data;
    });
};

//保存数据
const reg = /^1[3-9]\d{9}$/;
const handleSave = () => {
  const phoneNumbers = [
    state.dataForm.mobile,
    state.dataForm.mobile2,
  ];

  const hasAtLeastOneFilled = [state.dataForm.mobile, state.dataForm.mobile2, state.dataForm.tel, state.dataForm.tel2].some(value => value !== undefined && value !== null && value !== '');

if (!hasAtLeastOneFilled) {
  ElMessage.error("请至少填写一个联系方式");
  return;
}
  // 检查是否所有填写的电话号码都通过了校验
  const allPhoneNumbersValid = phoneNumbers.every(phoneNumber => !phoneNumber || reg.test(phoneNumber));

  // 如果有无效的电话号码，显示错误消息并返回
  if (!allPhoneNumbersValid) {
    ElMessage.error("请检查联系方式的格式");
    return;
  }

  // 如果所有电话号码都通过了校验，执行保存操作
  return baseService.put("/crm/crmperson", state.dataForm).then((res) => {
    if (res.code === 0) {
      // 保存成功，重新获取数据列表
      state.getDataList();
      return ElMessage.success("保存成功");
    } else {
      // 保存失败，显示错误消息
      ElMessage.error("保存失败");
    }
  }).catch((error) => {
    // 请求失败，显示错误消息
    ElMessage.error("保存请求失败");
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

init();

</script>

<style lang="scss" scoped>
* {
    text-align: left;
}

.el-input {
    width: 240px;
    margin-left: 5px;
}

.message {
    font-size: 14px;
    font-weight: 600;
}

.el-form-item::v-deep {
    .el-checkbox-group {
        .el-checkbox {
            width: 70px;
        }
    }
}

.el-radio-group ::v-deep {
    .el-radio {
        width: 60px;
    }
}
</style>
